{% extends 'base_dashboard.html' %}

{% block title %}Proctor queue — {{ site_settings.institute_name }}{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-start mb-4">
  <div>
    <h4 class="fw-bold mb-1">Live proctor sessions</h4>
    <p class="text-muted small mb-0">Candidates who paid and need an unlock code during a video meeting</p>
  </div>
</div>

<div class="card border-0 shadow-sm rounded-4">
  <div class="table-responsive">
    <table class="table mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th class="ps-4">Candidate</th>
          <th>Program</th>
          <th>Status</th>
          <th>Attempts left</th>
          <th class="pe-4"></th>
        </tr>
      </thead>
      <tbody>
        {% for app in applications %}
        <tr>
          <td class="ps-4">
            <div class="fw-semibold">{{ app.candidate.get_display_name }}</div>
            <div class="small text-muted">{{ app.candidate.email }}</div>
          </td>
          <td>{{ app.program.title }}</td>
          <td><span class="badge text-bg-secondary">{{ app.get_status_display }}</span></td>
          <td>{{ app.attempts_remaining }}</td>
          <td class="pe-4 text-end">
            <a href="{% url 'certifications:proctor_create' app.pk %}" class="btn btn-sm btn-primary">
              Create unlock code
            </a>
          </td>
        </tr>
        {% empty %}
        <tr><td colspan="5" class="text-center text-muted py-5">No candidates waiting for proctoring.</td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}